<template>
  <div class="content" @mouseenter="enter(id)" @mouseleave="leave()">
    <div class="img">
      <img :src="src" alt="" />
    </div>
    <p>
      <span>￥{{ price }}元</span>
      <b>预计收入{{ earnings }}元</b>
    </p>

    <div class="con" v-show="ishow && num === id">
      <div class="desp">{{productname}}</div>
      <div class="num">
        <div class="left">
          <div>
            <component
              is="Coin"
              style="width: 20px; height: 20px; color: rgb(50, 76, 197)"
            />
            <span style="margin-left: 15px">库存:{{stock}}件</span>
          </div>
          <div>
            <component
              is="Discount"
              style="width: 20px; height: 20px; color: rgb(50, 76, 197)"
            />
            <span style="margin-left: 15px">月销:{{monthlysales}}件</span>
          </div>
        </div>
        <div class="right" @click="label(id)">
          <component
            is="Flag"
            style="width: 30px; height: 30px; color: rgb(50, 76, 197)"
          />
          <span style="font-size: 18px; font-weight: 600">{{labelStr}}</span>
        </div>
      </div>
    </div>

    <div class="biao" v-show="flag">
      <component is="Flag" style="width: 30px; height: 30px; color: orange" />
      <span>已标</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStoreSum } from "@/stores/sum.js";
import  getImageUrl  from "../utils/images.js";

const useStore = useStoreSum();

const num = ref(0);


//判断标记是否显示
const flag = ref(false);
const labelFlag = ref(false);

//标记内容
const labelStr = ref('标注');

const props = defineProps({
  src: {
    type: String,
    default: "",
  },
  price: {
    type: Number,
    default: 0,
  },
  earnings: {
    type: Number,
    default: 0,
  },
  ishow: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  monthlysales:{
    type:Number,
    default:0
  },
  stock:{
    type:Number,
    default:0
  },
  productname:{
    type:String,
    default:''
  }
});
//鼠标移入设置num值为id
function enter(id) {
  num.value = id;
}

//鼠标移出将num值设置为0
function leave() {
  num.value = 0;
}

//商品标注函数
function label(id){
  useStore.inStorageId.push(id);
  labelFlag.value = !labelFlag.value;
  if(labelFlag.value){
    flag.value = true;
    labelStr.value = '已标'
  }else{
    flag.value = false;
    labelStr.value='标注'
  }
}
</script>

<style lang="less" scoped>
.content {
  width: 254px;
  height: 270px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
  }
  &:hover img {
    width: 80px !important;
    height: 80px !important;
    left: 0;
    top: 0;
  }
  &:hover p {
    bottom: 180px;
    left: 144px;
  }
  &:hover .con {
    bottom: 0;
  }

  .img {
    width: 189px;
    height: 189px;
    margin: 20px auto 0;
    position: relative;
    img {
      width: 150px;
      height: 150px;
      margin: 20px auto;
      border-radius: 10px;
      transition: 0.5s;
      position: absolute;
      left: 20px;
    }
  }
  p {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 80px;
    transition: 0.5s;
    span {
      font-weight: 800;
      font-size: 20px;
    }
  }
  .con {
    position: absolute;
    bottom: -200px;
    left: 0;
    transition: 0.5s;
    height: 140px;
    width: 100%;

    .desp {
      margin-left: 40px;
      text-align: center;
    }
    .num {
      margin-left: 40px;
      display: flex;
      .left {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .right {
        padding-left: 15px;
        margin-top: 10px;
        margin-left: 15px;
        height: 60px;
        border-left: 1px solid rgb(255, 215, 89);
        display: flex;
        flex-direction: column;
      }
    }
  }

  .biao {
    position: absolute;
    left: 50%;
    top: 100px;
    border-radius: 20px;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      font-size: 16px;
      color: white;
      font-weight: 600;
      margin-left: 10px;
    }
  }
}
</style>
